<template>
  <div class="inventory-report-search">
    <ElForm :model="searchForm" :inline="true" label-width="80px">
      <ElFormItem label="仓库">
        <ElSelect
          v-model="searchForm.warehouseId"
          placeholder="请选择仓库"
          clearable
          style="width: 200px"
          @change="handleWarehouseChange"
        >
          <ElOption
            v-for="warehouse in warehouseOptions"
            :key="warehouse.value"
            :label="warehouse.label"
            :value="warehouse.value"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="库区">
        <ElSelect
          v-model="searchForm.areaId"
          placeholder="请选择库区"
          clearable
          style="width: 150px"
          :disabled="!searchForm.warehouseId"
        >
          <ElOption
            v-for="area in areaOptions"
            :key="area.value"
            :label="area.label"
            :value="area.value"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="商品名称">
        <ElInput
          v-model="searchForm.itemName"
          placeholder="请输入商品名称"
          clearable
          style="width: 200px"
        />
      </ElFormItem>

      <ElFormItem label="SKU名称">
        <ElInput
          v-model="searchForm.skuName"
          placeholder="请输入SKU名称"
          clearable
          style="width: 200px"
        />
      </ElFormItem>

      <ElFormItem label="库存状态">
        <ElSelect
          v-model="searchForm.stockStatus"
          placeholder="请选择库存状态"
          clearable
          style="width: 150px"
        >
          <ElOption label="有库存" value="inStock" />
          <ElOption label="无库存" value="outOfStock" />
          <ElOption label="库存不足" value="lowStock" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="更新时间">
        <ElDatePicker
          v-model="searchForm.updateTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 240px"
        />
      </ElFormItem>

      <ElFormItem>
        <ElButton type="primary" @click="handleSearch">
          <ElIcon><Search /></ElIcon>
          搜索
        </ElButton>
        <ElButton @click="handleReset">
          <ElIcon><Refresh /></ElIcon>
          重置
        </ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { useWmsStore } from "@/store/modules/wms";
import type { WMS } from "@/types/wms";

defineOptions({ name: "InventoryReportSearch" });

// 定义事件
const emit = defineEmits<{
  search: [params: WMS.InventoryQueryParams];
  reset: [];
}>();

// 使用WMS store
const wmsStore = useWmsStore();

// 搜索表单
const searchForm = reactive<
  WMS.InventoryQueryParams & {
    stockStatus?: string;
    updateTimeRange?: string[];
  }
>({
  warehouseId: undefined,
  areaId: undefined,
  itemName: "",
  skuName: "",
  stockStatus: "",
  updateTimeRange: [],
});

// 仓库选项
const warehouseOptions = computed(() => wmsStore.warehouseOptions);

// 库区选项（根据选中的仓库过滤）
const areaOptions = computed(() => {
  if (!searchForm.warehouseId) return [];
  return wmsStore.areaOptions.filter(
    (area) => area.warehouseId === searchForm.warehouseId,
  );
});

// 仓库变化处理
const handleWarehouseChange = () => {
  // 清空库区选择
  searchForm.areaId = undefined;

  // 如果选择了仓库，加载对应的库区数据
  if (searchForm.warehouseId) {
    wmsStore.getAreaListByWarehouse(searchForm.warehouseId);
  }
};

// 搜索
const handleSearch = () => {
  const params: WMS.InventoryQueryParams = {
    warehouseId: searchForm.warehouseId,
    areaId: searchForm.areaId,
    itemName: searchForm.itemName || undefined,
    skuName: searchForm.skuName || undefined,
  };

  // 处理时间范围
  if (searchForm.updateTimeRange && searchForm.updateTimeRange.length === 2) {
    params.updateTimeStart = searchForm.updateTimeRange[0];
    params.updateTimeEnd = searchForm.updateTimeRange[1];
  }

  // 处理库存状态
  if (searchForm.stockStatus) {
    switch (searchForm.stockStatus) {
      case "inStock":
        params.minQuantity = 1;
        break;
      case "outOfStock":
        params.maxQuantity = 0;
        break;
      case "lowStock":
        params.maxQuantity = 10;
        break;
    }
  }

  emit("search", params);
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    warehouseId: undefined,
    areaId: undefined,
    itemName: "",
    skuName: "",
    stockStatus: "",
    updateTimeRange: [],
  });
  emit("reset");
};

// 初始化
onMounted(async () => {
  // 加载仓库数据
  await wmsStore.getWarehouseList();
});
</script>

<style lang="scss" scoped>
.inventory-report-search {
  padding: 16px;
  background: var(--el-bg-color-page);
  border-radius: 4px;
  margin-bottom: 16px;

  .el-form-item {
    margin-bottom: 16px;
  }
}
</style>
